
<template>
    <div class="header_information page-container">
        <!-- 头部 -->
        <el-row class="header_name">
            <el-col :span="24" class="header_text">
                <h1>待批阅列表</h1>
            </el-col>
            <el-col :span="24">
                <div class="header_line"></div>
            </el-col>
        </el-row>
        <!-- 内容 -->
        <el-row>
            <el-col :span="24">
                <el-table v-loading="loading" empty-text="暂无数据..." :data="tableData" border style="width: 100%">
                    <el-table-column label="ID" prop="esId" width="100" />
                    <el-table-column label="考场名" prop="siteName" />
                    <el-table-column label="赛项" prop="eventName" />
                    <el-table-column label="考试时间" prop="startTime" />
                    <el-table-column label="是否批阅" prop="readOverState">
                        <template #default="scope">
                            <el-tag type="warning" v-if="scope.row.readOverState == 0">待批阅</el-tag>
                            <el-tag type="primary" v-else-if="scope.row.readOverState == 1">正在批阅</el-tag>
                            <el-tag type="success" v-else-if="scope.row.readOverState == 2">已批阅</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" prop="Address" width="100">
                        <template #default="scope">
                            <el-dropdown trigger="click" @command="(value) => handleOperate(value, scope.row)">
                                <span class="el_dropdown_link">
                                    操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="auto-check"
                                            v-if="scope.row.readOverState != 2">一键批阅选择题</el-dropdown-item>
                                        <el-dropdown-item command="check"
                                            v-if="scope.row.readOverState != 2">开始批阅主观题</el-dropdown-item>
                                        <el-dropdown-item command="select"
                                            v-if="scope.row.readOverState == 2">查看得分情况</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>

                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next, total" :total="total" @current-change="handlePage" />
        </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="subjectivity_show" title="主观题批阅" width="960px">
        <SubjectivityList :data="subjectivity_data" @close="subjectivity_show = false; handleLoad(true);" />
    </el-dialog>
    <ScorListModal/>
</template>
<script  setup>
import {
    Edit, Delete
} from "@element-plus/icons-vue";
import { onMounted, ref, nextTick } from "vue";
import { usePage } from "@/hooks/usePage"
import { ElMessage, ElMessageBox } from 'element-plus';
import { GradingTeacherPaperListApi, GradingTeacherReadOverSelectSubjectsApi, GradingTeacherSubjectiveListApi, UpdateSubjectivityScore } from "@/api/gradingTeacher.js"
import SubjectivityList from "./components/subjectivity-list.vue"
import { open } from "@/utils/modal";
import ScorListModal from "@/components/score-list-modal/score-list-modal.vue"
// 表格数据
const {
    total: total,
    data: tableData,
    query_data,
    loading,
    handleLoad,
    handlePage
} = usePage({
    api_fn: GradingTeacherPaperListApi,
    q_data: {

    }
})


// input变化
const changeInp = () => {
    handleLoad(true)
}
/**
 * 信息弹窗数据
 */
const info_modal = ref(false)
const InfoModal = ref();
/**
 * 操作
 */
const handleOperate = (command, row) => {
    if (command == 'auto-check') {
        ElMessageBox.confirm('是否使用一键批阅选择题', "提示", {
            "cancel-button-text": "取消",
            "confirm-button-text": "确定",
        }).then(async () => {
            let res = await GradingTeacherReadOverSelectSubjectsApi({
                esId: row.esId
            })
            if (!res.success) {
                ElMessage.error(res.message);
            } else {
                ElMessage.success(res.message);
            }

        })
    } else if (command == 'check') {
        handleOpenSubjectivityModal(row);
    } else if (command == 'select') {
        handleOpenScoreModal(row);
    }
}

const subjectivity_show = ref(false);
const subjectivity_data = ref([]);
/**
 * 获取主观题列表
 */
const handleOpenSubjectivityModal = async (row) => {
    subjectivity_show.value = true;
    let res = await GradingTeacherSubjectiveListApi({ esId: row.esId });
    if (res.success) {
        subjectivity_data.value = res.entityList
    }
}

/**
 * 获取得分情况列表
 */
const handleOpenScoreModal = async (row) => {
    open('score-list-modal', row)
}

onMounted(() => {
    handleLoad(true)
})
</script>

<style lang="scss" scoped>
.header_information {
    padding: 20px;

    .header_name {
        margin-left: 10px;
        margin-right: 10px;

        .header_text {
            margin-left: -10px;
            margin-right: -10px;
        }

        h1 {
            font-size: 28px;
        }

        // 线
        .header_line {
            display: block;
            height: 1px;
            width: 100%;
            margin: 24px 0 20px 0;
            background-color: #8473f717;
        }
    }

    //   内容
    :deep(.table_btn_success) {
        padding: 0 5px !important;
        border: none;
    }

    :deep(.el-table) .cell {
        padding: 0 10px;
    }

    .el_row_btn {
        margin-bottom: 20px;

        .content {
            .content_top_btn {
                display: flex;
                justify-content: space-between;

                .top_search_inp {
                    width: 300px;
                    height: 40px;
                    margin-right: 5px;
                }

                .top_search_btn {
                    width: 110px;
                    margin-right: 5px;
                }
            }
        }
    }

    .el-radio {
        margin: 0 0 0 5px;
    }

    .el_dropdown_link {
        font-size: 14px;
    }

    :deep(.el-table)__cell {
        padding: 12px 0 !important;
    }

    // 分页
    .pagination {
        margin-top: 30px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
    }
}
</style>